"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _portal = require("../mixins/portal");

var _relation = require("../mixins/relation");

var _event = require("../utils/dom/event");

var _cell = _interopRequireDefault(require("../cell"));

var _icon = _interopRequireDefault(require("../icon"));

var _popup = _interopRequireDefault(require("../popup"));

var _createNamespace = (0, _utils.createNamespace)('dropdown-item'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var _default2 = createComponent({
    mixins: [(0, _portal.PortalMixin)({
        ref: 'wrapper'
    }), (0, _relation.ChildrenMixin)('vanDropdownMenu')],
    props: {
        value: null,
        title: String,
        disabled: Boolean,
        titleClass: String,
        options: {
            type: Array,
            default: function _default() {
                return [];
            }
        }
    },
    data: function data() {
        return {
            transition: true,
            showPopup: false,
            showWrapper: false
        };
    },
    computed: {
        displayTitle: function displayTitle() {
            var _this = this;

            if (this.title) {
                return this.title;
            }

            var match = this.options.filter(function (option) {
                return option.value === _this.value;
            });
            return match.length ? match[0].text : '';
        }
    },
    watch: {
        showPopup: function showPopup(val) {
            this.bindScroll(val);
        }
    },
    beforeCreate: function beforeCreate() {
        var _this2 = this;

        var createEmitter = function createEmitter(eventName) {
            return function () {
                return _this2.$emit(eventName);
            };
        };

        this.onOpen = createEmitter('open');
        this.onClose = createEmitter('close');
        this.onOpened = createEmitter('opened');
    },
    methods: {
        // @exposed-api
        toggle: function toggle(show, options) {
            if (show === void 0) {
                show = !this.showPopup;
            }

            if (options === void 0) {
                options = {};
            }

            if (show === this.showPopup) {
                return;
            }

            this.transition = !options.immediate;
            this.showPopup = show;

            if (show) {
                this.parent.updateOffset();
                this.showWrapper = true;
            }
        },
        bindScroll: function bindScroll(bind) {
            var scroller = this.parent.scroller;
            var action = bind ? _event.on : _event.off;
            action(scroller, 'scroll', this.onScroll, true);
        },
        onScroll: function onScroll() {
            this.parent.updateOffset();
        },
        onClickWrapper: function onClickWrapper(event) {
            // prevent being identified as clicking outside and closed when use get-contaienr
            if (this.getContainer) {
                event.stopPropagation();
            }
        }
    },
    render: function render() {
        var _this3 = this;

        var h = arguments[0];
        var _this$parent = this.parent,
            zIndex = _this$parent.zIndex,
            offset = _this$parent.offset,
            overlay = _this$parent.overlay,
            duration = _this$parent.duration,
            direction = _this$parent.direction,
            activeColor = _this$parent.activeColor,
            closeOnClickOverlay = _this$parent.closeOnClickOverlay;
        var Options = this.options.map(function (option) {
            var active = option.value === _this3.value;
            return h(_cell.default, {
                "attrs": {
                    "clickable": true,
                    "icon": option.icon,
                    "title": option.text
                },
                "key": option.value,
                "class": bem('option', {
                    active: active
                }),
                "style": {
                    color: active ? activeColor : ''
                },
                "on": {
                    "click": function click() {
                        _this3.showPopup = false;

                        if (option.value !== _this3.value) {
                            _this3.$emit('input', option.value);

                            _this3.$emit('change', option.value);
                        }
                    }
                }
            }, [active && h(_icon.default, {
                "class": bem('icon'),
                "attrs": {
                    "color": activeColor,
                    "name": "success"
                }
            })]);
        });
        var style = {
            zIndex: zIndex
        };

        if (direction === 'down') {
            style.top = offset + "px";
        } else {
            style.bottom = offset + "px";
        }

        return h("div", [h("div", {
            "directives": [{
                name: "show",
                value: this.showWrapper
            }],
            "ref": "wrapper",
            "style": style,
            "class": bem([direction]),
            "on": {
                "click": this.onClickWrapper
            }
        }, [h(_popup.default, {
            "attrs": {
                "overlay": overlay,
                "position": direction === 'down' ? 'top' : 'bottom',
                "duration": this.transition ? duration : 0,
                "closeOnClickOverlay": closeOnClickOverlay,
                "overlayStyle": {
                    position: 'absolute'
                }
            },
            "class": bem('content'),
            "on": {
                "open": this.onOpen,
                "close": this.onClose,
                "opened": this.onOpened,
                "closed": function closed() {
                    _this3.showWrapper = false;

                    _this3.$emit('closed');
                }
            },
            "model": {
                value: _this3.showPopup,
                callback: function callback($$v) {
                    _this3.showPopup = $$v;
                }
            }
        }, [Options, this.slots('default')])])]);
    }
});

exports.default = _default2;